<template>
  <!--粘棒记录-->
  <div class="app-container">

    <el-form class="jc_search_wrap jc_saoma" v-model="searchList" >
      <label>单晶编号</label>
      <input v-model="searchList.crystalNo" @blur="searchRows" @keyup.enter="searchRows" style="width: 350px;height:40px;"></input>
      <el-button @click="searchRows"><i class="el-icon-search"></i>查询</el-button>
    </el-form>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <div v-if="isShow" style="color: red;text-align: center;">
        <p>扫码后可获得打印表格</p>
      </div>
      <div id="pdf-wrap" v-else  :style="{height:tableHeight-30+'px'}" style="overflow: auto;">
      <!--方棒信息-->
      <!--<table class="jc_table" v-model="lailiaoList">
        <tr>
            <th rowspan="6" width="100px">方棒信息</th>
            <td colspan="6" style="text-align: center;">粘棒工序填写</td>
        </tr>
        <tr>
          <td rowspan="4" width="200px">单晶编号</td>
          <td width="300">{{lailiaoList.crystalNo}}</td>
          <td rowspan="4" width="200px">棒长(mm)</td>
          <td>{{lailiaoList.crystalLength}}</td>
          <td rowspan="4" width="200px">领料已崩或切断长度(mm)</td>
          <td></td>
        </tr>
        <tr>
          <td>&lt;!&ndash;<el-form-item label="" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>&ndash;&gt;</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td colspan="6" style="text-align: center;">理论出片数 = ( 方棒长度 - 拼棒段数 * 3 - 领料已崩或切断长度 ) / 槽轮系数</td>
        </tr>
      </table>-->
      <h5 style="text-align:center;margin: 2px 0 0 0;">加工流程卡</h5>
      <p style="text-align: right;font-size:12px;">日期：<span style="margin-left: 50px;">年</span><span style="margin-left: 50px;">月</span> <span style="margin-left: 50px;">日</span></p>
      <p style="text-align:center;font-size:12px;">切割刀号: <span>{{xianqieList.incisionNo}}</span> </p>
      <table class="jc_table">
          <tr>
            <th rowspan="6" width="10%">方棒信息</th>
            <td colspan="6" style="text-align: center;">粘棒工序填写</td>
          </tr>
          <tr v-for="item in lailiaoList">
            <td width="10%">单晶编号</td>
            <td width="10%">{{item.crystalNo}}</td>
            <td width="10%">棒长(mm)</td>
            <td width="10%">{{item.crystalLength}}</td>
            <td width="12%">领料已崩或切断长度(mm)</td>
            <td width="10%">{{item.chipLength}}</td>
          </tr>
          <tr>
            <td colspan="6" style="text-align: center;">理论出片数 = ( 方棒长度 - 拼棒段数 * 3 - 领料已崩或切断长度 ) / 槽轮系数</td>
          </tr>
        </table>
      <!--粘棒-->
      <table class="jc_table" v-model="zhangbangList">
        <tr>
          <th rowspan="4" width="100">粘棒</th>
          <td width="200">树脂板厂家/颜色</td>
          <td>{{zhangbangList.manufacturers}} {{zhangbangList.colour}}</td>
          <td rowspan="2" width="200">粘树脂板员/时间</td>
          <td rowspan="2">{{zhangbangList.resinName}} {{zhangbangList.resinDate}}</td>
          <td rowspan="2" width="200">上料员/时间</td>
          <td rowspan="2">{{zhangbangList.chargeName}} {{zhangbangList.chargeDate}}</td>
          <td width="200">机台号</td>
          <td>{{zhangbangList.machineNo}}</td>
        </tr>
        <tr>
          <td width="200">单晶粘接温度</td>
          <td width="200">{{zhangbangList.temperature}}</td>
          <td width="200">料座号</td>
          <td width="200">{{zhangbangList.liaozuoNo}}</td>
        </tr>
        <tr>
          <td width="200">下料员</td>
          <td width="200">{{zhangbangList.unloadName}}</td>
          <td width="200">去胶员/时间</td>
          <td width="200">{{zhangbangList.degummingName}} {{zhangbangList.degummingDate}}</td>
          <td width="200">崩损(mm)/崩损人</td>
          <td width="200">{{zhangbangList.damageCondition}}</td>
          <td width="200">粘棒员/时间(人工粘棒时填写)</td>
          <td width="200">{{zhangbangList.stickName }} {{zhangbangList.stickDate }}</td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="3">{{zhangbangList.description}}</td>
          <td>总棒长(mm)</td>
          <td colspan="3">{{zhangbangList.stickLength}} </td>
        </tr>
      </table>
      <!--线切-->
      <table class="jc_table" v-model="xianqieList">
        <tr>
          <th rowspan="10" width="100">线切</th>
          <td width="200">领料员/时间</td>
          <td>{{xianqieList.lingliaoName}} {{xianqieList.lingliaoDate}}</td>
          <td width="200">机台号</td>
          <td colspan="2">{{xianqieList.machineNo}}</td>
          <td width="200">理论出片数(片)</td>
          <td colspan="2">{{xianqieList.theoretical}}</td>
        </tr>
        <tr>
          <td width="200">槽轮厂家</td>
          <td width="200">{{xianqieList.caolunManufacturers }}</td>
          <td width="200">槽轮直径(mm)</td>
          <td width="200">{{xianqieList.caolunDiameter }}</td>
          <td width="200">槽轮系数(mm)</td>
          <td width="200">{{xianqieList.caolunCoefficient }}</td>
          <td width="200">槽轮/滑轮使用时间</td>
          <td width="200">{{xianqieList.caolunEmploy }}</td>
        </tr>
        <tr>
          <td>冷却液类型</td>
          <td>{{xianqieList.lengqueyeType }}</td>
          <td>冷却液量(L)</td>
          <td>{{xianqieList.lengqueyeQuantity }}</td>
          <td>消泡剂(ml)</td>
          <td>{{xianqieList.lengqueyeDefoamer }}</td>
          <td>全液刀次</td>
          <td>{{xianqieList.lengqueyeCount }}</td>
        </tr>
        <tr>
          <td>钢线厂家</td>
          <td>{{xianqieList.gangxianManufacturers }}</td>
          <td>钢线直径(mm)</td>
          <td>{{xianqieList.gangxianDiameter }}</td>
          <td>线网长度(mm)</td>
          <td>{{xianqieList.gangxianLength  }}</td>
          <td>新线网使用刀次</td>
          <td>{{xianqieList.gangxianCount }}</td>
        </tr>
        <tr>
          <td width="200">切割开始时间</td>
          <td>{{xianqieList.incisionStartDate }}</td>
          <td width="200">切割结束时间</td>
          <td colspan="2">{{xianqieList.incisionEndDate }}</td>
          <td width="200">每片用线量m/pcs</td>
          <td colspan="2">{{xianqieList.pianyongxianliang }}</td>
        </tr>
        <tr>
          <td>上料员</td>
          <td>{{xianqieList.chargeName  }}</td>
          <td>下料员</td>
          <td colspan="2">{{xianqieList.materialName }}</td>
          <td>每刀用线量km</td>
          <td colspan="2">{{xianqieList.daoyongxianliang }}</td>
        </tr>
        <tr>
          <td width="200">头/尾部甩切厚度(mm)</td>
          <td>{{xianqieList.anomalyThickness }}</td>
          <td width="200">掉/碎片数</td>
          <td>{{xianqieList.anomalySuipian }}</td>
          <td width="200">跳线根数</td>
          <td>{{xianqieList.anomalyTiaoxian }}</td>
          <td width="200">切后剩余线量</td>
          <td>{{xianqieList.anomalyResidue }}</td>
        </tr>
        <tr>
          <td width="220">切割中异常情况描述</td>
          <td colspan="7">{{xianqieList.qiegezhongDescription }}</td>
        </tr>
        <tr>
          <td width="220">切割后异常情况描述</td>
          <td colspan="7">{{xianqieList.qiegehouDescription }}</td>
        </tr>
        <tr>
          <td width="220">备注</td>
          <td colspan="7">{{xianqieList.description }}</td>
        </tr>
      </table>
      <!--脱胶-->
      <table class="jc_table" v-model="tuojiaoList">
        <tr>
          <th rowspan="6" width="100">脱胶</th>
          <td width="200">脱胶机台号</td>
          <td colspan="2">{{tuojiaoList.equipmentNo}}</td>
          <td width="200">上料员/时间</td>
          <td colspan="2">{{tuojiaoList.upFeeder}} {{tuojiaoList.upFeedtime}}</td>
          <td width="200">棒长</td>
          <td>{{tuojiaoList.degumLength}}<span style="float: right">mm</span></td>
        </tr>
        <tr>
          <td>料架号</td>
          <td colspan="2">{{tuojiaoList.shelfNumber}}</td>
          <td>下料员/时间</td>
          <td colspan="2">{{tuojiaoList.downFeeder}} {{tuojiaoList.downFeedtime}}</td>
          <td>下料自损</td>
          <td>{{tuojiaoList.downSelfloss}}<span style="float: right">片</span></td>
      </tr>
        <tr>
          <td>周转箱号</td>
          <td colspan="2">{{tuojiaoList.turnoverNo}}</td>
          <td>导电类型</td>
          <td colspan="2">{{tuojiaoList.conductiveType}}</td>
          <td>厚片</td>
          <td width="400">
            {{tuojiaoList.thickSlice}}
            <!--<span style="margin-right:40px;">/</span>
            <span style="margin-right:40px;">/</span>
            <span style="margin-right:40px;">/</span>
            <span style="margin-right:40px;">/</span>
            <span style="margin-right:40px;">/</span>
            <span style="margin-right:40px;">/</span>
            <span>/</span>-->
          </td>
        </tr>
        <tr>
          <td width="200">换水刀次</td>
          <td width="200">{{tuojiaoList.changewaterKnife}}</td>
          <td width="200">气泡</td>
          <td width="200">{{tuojiaoList.bubble}}<span style="float: right">mm</span></td>
          <td width="200">崩损</td>
          <td width="200">{{tuojiaoList.avalancheLoss}}</td>
          <td width="200">线切掉片</td>
          <td width="200">{{tuojiaoList.linecutDroppiece}}<span style="float: right">mm</span></td>
        </tr>
        <tr>
          <td>自检情况</td>
          <td>{{tuojiaoList.selfCheck}}</td>
          <td>色差</td>
          <td>{{tuojiaoList.chromatism}}</td>
          <td>线痕</td>
          <td>{{tuojiaoList.lineMark}}</td>
          <td>线切甩切</td>
          <td>{{tuojiaoList.linecutShed}}<span style="float: right">mm</span></td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="7">{{tuojiaoList.remark}}</td>
        </tr>
      </table>
      <!--插片-->
      <table class="jc_table" v-model="chapianList">
        <tr>
          <th rowspan="3" width="5%">插片</th>
          <td width="10%">插片机号</td>
          <td width="20%">{{chapianList.capianNo }}</td>
          <td width="10%">插片数量(片)</td>
          <td width="20%">{{chapianList.capianCount}}</td>
          <td width="10%">插片员/时间</td>
          <td width="10%">{{chapianList.capianName}} {{chapianList.capianDate}}</td>
        </tr>
        <tr>
          <td width="10%">插片裂片数(片)</td>
          <td>{{chapianList.capianLiepian }}</td>
          <td width="10%">插片碎片数(片)</td>
          <td colspan="4">{{chapianList.capianSuipian }}</td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="7">{{chapianList.description }} </td>
        </tr>
      </table>
      <!--清洗-->
      <table class="jc_table" v-model="qingxiList">
          <tr>
            <th rowspan="3" width="5%">清洗</th>
            <td width="10%">清洗机台号</td>
            <td width="20%"> {{qingxiList.rinseNo}}</td>
            <td width="11%">清洗接片数量(片)</td>
            <td width="20%"> {{qingxiList.rinseJiepian}}</td>
            <td width="10%">送验片数(片)</td>
            <td width="20%"> {{qingxiList.songyan}}</td>
          </tr>
          <tr>
            <td >清洗员/时间</td>
            <td>{{qingxiList.rinseName }} {{qingxiList.rinseDate }}</td>
            <td>清洗自损(片)</td>
            <td>{{qingxiList.rinseDamage }}</td>
            <td>累计洗片数(片)</td>
            <td>{{qingxiList.count }}</td>
          </tr>
          <tr>
            <td width="200">备注</td>
            <td colspan="7"> {{qingxiList.description }}</td>
          </tr>
        </table>
    </div>
      <el-form-item style="text-align:center;margin-top: 20px;">
        <!--<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>-->
        <el-button @click="printContent" v-if="!isShow">打印</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>

  import * as Printing from "../../api/report/printing";
  import * as Illustration from "../../api/report/illustration";
  import * as Rinse from "../../api/report/rinse";

  export default {
    components: {

    },
    data() {
      return {
        isShow: true,
        zhangbangList: {},
        lailiaoList: [],
        xianqieList: {},
        tuojiaoList: {},
        chapianList: {},
        qingxiList: {},
        searchList: {crystalNo: ''},
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }

      }

    },
    created() {
      this.fetchData();

    },
    methods: {
      searchRows() {
        if(this.searchList.crystalNo.trim()!=="") {
          this.isShow = false;
        }
        Printing.getList_lailiao(this.searchList.crystalNo.trim()).then(data => { //方棒
          if(data.msg !==null) {
            this.lailiaoList = data.msg;
          }
        })
        Printing.getList_zhanbang(this.searchList.crystalNo.trim()).then(data => {//粘棒
          if(data.msg !==null) {
            this.zhangbangList = data.msg;
            //传给接口料座号
            //获得粘树脂信息
            Printing.getList_zhanshuzhi(data.msg.liaozuoNo).then(data => {
              if(data.msg !==null) {
                this.zhangbangList.resinName= data.msg.name;
                this.zhangbangList.resinDate= data.msg.glueResinDate;
                this.zhangbangList.colour= data.msg.colour;
                this.zhangbangList.manufacturers= data.msg.manufacturers;

              }
            })

          }

        })
        Printing.getList_xianqie(this.searchList.crystalNo.trim()).then(data => { //线切
          if(data.msg !==null) {
            this.xianqieList = data.msg;
          }
        })
        Printing.getList_tuojiao(this.searchList.crystalNo.trim()).then(data => { //脱胶
          if(data.msg !==null) {
            this.tuojiaoList = data.msg;
          }
        })
        Illustration.getList_chapian(this.searchList.crystalNo.trim()).then(data => { //插片
          if(data.msg !==null) {
            this.chapianList = data.msg;
          }
        })
        Rinse.getList_qingxi(this.searchList.crystalNo.trim()).then(data => { //清洗
          if(data.msg !==null) {
            this.qingxiList = data.msg;
          }
        })
        //this.printContent();
      },
      printContent(){
        let subOutputRankPrint = document.getElementById('pdf-wrap');
        //console.log(subOutputRankPrint.innerHTML);
        let newContent =subOutputRankPrint.innerHTML;
        let oldContent = document.body.innerHTML;
        document.body.innerHTML = newContent;
        window.print();
        window.location.reload();
        document.body.innerHTML = oldContent;
        return false;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            //console.log('error submit!!');
            return false;
          }
        });
      },
      fetchData() {

      },
      emptyInputs() {
        this.searchList = {};
        this.fetchData()
      },
      createRow() {
      },
      submitCreateForm() {
      },
      editRow() {
      },
      submitEditForm() {
      },
      detailRow(row) {
      },
      deleteRow() {
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      changePage(p) {
        this.fetchData(p)
      }
    },
    computed: {
      tableHeight() {
        const filterHeight = 28;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight;
      }
    }
  }
</script>
